<template>
  <div class="items-center justify-center flex flex-col w-full h-full">
    <p>多圆环嵌套图 2秒后数据更新 父元素relative</p>
    <p class="w-3/4 h-3/4 relative">
      <ConcentricCircleChart v-bind="chartAtr"></ConcentricCircleChart>
    </p>
  </div>

</template>
<script setup lang="ts">
import ConcentricCircleChart from "@/pages/echart/charts/ConcentricCircleChart.vue";
import Mock from "@/mock";
import {ref} from "vue";


const chartAtr = ref({
  backgroundColor: "#020c3f",
  pieData: [],
  pieTitle: {
    text: "2019年",
    textStyle: {
      color: '#4358c7',
      fontSize: 16
    }
  },
  pieSubTitle: {
    text: "万元",
    textStyle: {
      color: '#c97505',
      fontSize: 14
    }
  },
})

// setTimeout(()=>{
//   cubeBarChartAtr.value = {
//     title: '5000后数据改变',
//     category: chart2Category,
//     values: chart2Category.map(e => {
//       return Mock.mock(`@integer(20, 100)`)
//     }),
//     isRate: false,
//     themeColor: `rgba(5, 84, 155, 1)`,
//   }
// }, 2000)
</script>

